<template>
  <div>
    <scEcharts height="250px" :option="option"></scEcharts>
  </div>
</template>

<script setup>
import scEcharts from "@/components/scEcharts"
import * as echarts from "echarts"

const option = ref({
  grid: {
    top: "60px",
    left: "4%",
    right: "4%",
    bottom: "0",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    textStyle: {
      fontSize: 12 // 字体大小
    },
  },
  legend: {
    data: ["门诊患者满意度", "住院患者满意度", "医务人员满意度"],
    top: 6, //调整图例位置
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 16,
    formatter: function (_name) {
      return `{a|${_name}}`;
    },
    textStyle: {
      color: "#333333",
      fontSize: 12,
      rich: {
        a: {
          verticalAlign: "middle",
          padding: [4, 0, 0, 0],
        },
      },
    },
  },
  xAxis: {
    type: "category",
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "门诊患者满意度",
      symbol: "circle",
      data: [93, 88, 83, 76, 80, 84, 89, 90, 86, 84, 79, 84],
      type: "line",
      showAllSymbol: true,
      symbolSize: 0,
      smooth: true,
      lineStyle: {
        width: 2,
        color: "rgba(25,163,223,1)", // 线条颜色
        borderColor: "rgba(0,0,0,.4)",
      },
      itemStyle: {
        color: "rgba(25,163,223,1)",
        borderColor: "#646ace",
        borderWidth: 0,
      },
      areaStyle: {
        //区域填充样式
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(25,163,223,.3)",
            },
            {
              offset: 1,
              color: "rgba(25,163,223, 0)",
            },
          ],
          false
        ),
        shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
        shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
      },
    },
    {
      name: "住院患者满意度",
      symbol: "circle",
      data: [87, 85, 83, 87, 93, 95, 90, 86, 84, 79, 89, 94],
      type: "line",
      showAllSymbol: true,
      symbolSize: 0,
      smooth: true,
      lineStyle: {
        width: 2,
        color: "rgba(0, 206, 201,1)", // 线条颜色
        borderColor: "rgba(0,0,0,.4)",
      },
      itemStyle: {
        color: "rgba(0, 206, 201,1)",
        borderColor: "#646ace",
        borderWidth: 0,
      },
      tooltip: {
        show: true,
      },
      areaStyle: {
        //区域填充样式
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(0, 206, 201,.3)",
            },
            {
              offset: 1,
              color: "rgba(0, 206, 201, 0)",
            },
          ],
          false
        ),
        shadowColor: "rgba(0, 206, 201, 0.5)", //阴影颜色
        shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
      },
    },
    {
      name: "医务人员满意度",
      symbol: "circle",
      data: [88, 78, 82, 85, 90, 93, 89, 83, 87, 92, 95, 93],
      type: "line",
      showAllSymbol: true,
      symbolSize: 0,
      smooth: true,
      lineStyle: {
        width: 2,
        color: "rgba(162, 155, 254,1)", // 线条颜色
        borderColor: "rgba(0,0,0,.4)",
      },
      itemStyle: {
        color: "rgba(162, 155, 254,1)",
        borderColor: "#646ace",
        borderWidth: 0,
      },
      tooltip: {
        show: true,
      },
      areaStyle: {
        //区域填充样式
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(162, 155, 254,.3)",
            },
            {
              offset: 1,
              color: "rgba(162, 155, 254,0)",
            },
          ],
          false
        ),
        shadowColor: "rgba(162, 155, 254, 0.5)", //阴影颜色
        shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
      },
    },
  ],
})
</script>

<style></style>
